<template> 
  <div id="app">
      <!-- <div v-bind:title="text">你是个麻瓜</div>
      <img :src="img" alt=""> -->
       <button @click="fun">点击</button>
      <!-- <ul>
        <li :class="current===0? 'active' : ''" @click="tabClick(0)">首页</li>
        <li :class="current===1? 'active' : ''" @click="tabClick(1)">发现</li>
        <li :class="current===2? 'active' : ''" @click="tabClick(2)">订单</li>
        <li :class="current===3? 'active' : ''" @click="tabClick(3)">我的</li>
      </ul> -->
      <div :class="{active: isActive, btn: true}">你是个麻瓜</div>
      <!-- <div :class="['nav', 'btn', className]">hello world</div> -->
      <div :style="style">hello world</div>
  </div>
</template>
<script>
import img from './assets/images/1.jpg'
import img2 from './assets/images/2.jpg'
export default {
  name: "helloApp",
  data() {
    return {
      text: "李狗蛋",
      img: img,
      className: "active",
      current: 0, // 用来记录当前点击的是第几个tab
      isActive: true,
      style: {
        color: 'blue',
        fontSize: '30px'
      }
    }
  },
  methods: {
    fun() {
      this.text = "王粪球"
      this.img = img2
      this.isActive = !this.isActive
    },
    // tab切换的事件
    tabClick(num) {
      this.current = num
    }
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div{
  // color: red;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.active{
  color: red;
}
</style>
